<template>
	<!-- <goodsList :goodslist="goodsList"/> -->
	<view class="pl30">
		<view class="flex flex-wrap">
			<view class="radius16 goodsItem mr30" v-for="(item,i) in goodsList" :key='i'
				@click="$jump('/subpkg/goodsDetail/goodsDetail?spu='+item.spu)">
				<!-- 上面的图片 -->
				<image :src="item.goods.img" class="w330 h330 "></image>
				<!-- //上面的图片 -->
				<!-- 下面的盒子 -->
				<view class="mt20 pl20 pr20 w330 flex row-column row-between">
					<view class="mb20 goodsNameBox">{{item.goods.name}}</view>
					<view class="flex row-between col-center">
						<view class="color9 fs24">
							<text>销量</text>
							<text>{{item.goods.virtual_sales+item.goods.sales}}</text>
						</view>
						<text class="color-red fs36">¥ {{item.goods.price}}</text>
					</view>
				</view>
				<!-- //下面的盒子 -->
			</view>
		</view>
	</view>
</template>

<script>
	import goodsList from '@/components/goodsList/goodsList.vue'
	export default {
		name: "myCollection",
		components: {
			goodsList
		},
		onLoad() {
			this.init()
		},
		data() {
			return {
				goodsList: []
			};
		},
		methods: {
			init() {
				this.$api.myCollection().then(res => {
					// console.log(res)
					this.goodsList = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.goodsItem {
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		margin-top: 30rpx;

		.goodsNameBox {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			/*控制在3行*/
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
</style>
